﻿<!DOCTYPE html>
<html>
<head>
 <script>
    function drawRect()
    {
        var cvs = document.getElementById('myText')
        var ctx = cvs.getContext('2d') 
        ctx.fillStyle='#FF00FF'
        ctx.fillRect(0,0,50,50)
        
        ctx.beginPath();
        ctx.moveTo(50,50)
        ctx.lineTo(80,80)
        ctx.stroke()
        
        ctx.beginPath();
        ctx.arc(95,50,40,0,Math.PI*1.75);//参数分别是,x,y,r,startAngel,endAngle
        ctx.stroke();
        
        ctx.fillStyle='#00FF11'
        ctx.fillText('Hello World',100,100)
        
    }
 </script>
</head>
<body onload="drawRect()" >
    <canvas id='myText' width='200' height='150' style="border:1px solid #000000" >
    </canvas>

</body>
</html>